<template>
	<view class="main">
		<!-- <view class="title">{{title}}</view> -->
		<u-sticky >
		<view class="title1">
			<u-search placeholder="请输入姓名或身份证号" @search="search" @custom="search" v-model="keyword"></u-search>
		</view>
		
		
		<view class="tableTh">
			<u-dropdown
			title-size="14px"
			:borderBottom="borderBottom"
			class="u-dropdowns"
			ref="uDropdown"
			  >				  
			  
				<u-dropdown-item v-model="value1" title="姓名" :disabled="true"  :options="options"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="身份证号" :disabled="true" :options="options"></u-dropdown-item>
				<u-dropdown-item v-model="value3" title="常住地" :disabled="true" :options="options"></u-dropdown-item>
				<u-dropdown-item v-model="value4" title="网格" >
					<view class="slot-content" style="background-color: #FFFFFF;">
										<scroll-view scroll-y="true" style="height: 400px;" >
											<view   @click="categrey('')" :class="[grid==''?'u-text-center2':'u-text-center1']">全部</view>
											<view     v-for="item in gridList" @click="categrey(item.grid)" :class="[grid==item.grid?'u-text-center2':'u-text-center1']">  
											{{item.grid}}
											
											</view>
											
										</scroll-view>
									</view>
					
					
				</u-dropdown-item>
			</u-dropdown>
			
			
		</view>
		</u-sticky >
		
		<ul class="Ul" >
			<!-- 标题行 -->
			<!-- <u-sticky >
			<li class="tableTh">
				<u-dropdown
				title-size="14px"
				:borderBottom="borderBottom"
				class="u-dropdowns"
				ref="uDropdown"
				  >				  
				  
					<u-dropdown-item v-model="value1" title="姓名" :disabled="true"  :options="options"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="身份证号" :disabled="true" :options="options"></u-dropdown-item>
					<u-dropdown-item v-model="value3" title="常住地" :disabled="true" :options="options"></u-dropdown-item>
					<u-dropdown-item v-model="value4" title="网格" >
						<view class="slot-content" style="background-color: #FFFFFF;">
											<scroll-view scroll-y="true" style="height: 250px;" >
												<view   @click="categrey('')" :class="[grid==''?'u-text-center2':'u-text-center1']">全部</view>
												<view     v-for="item in gridList" @click="categrey(item.grid)" :class="[grid==item.grid?'u-text-center2':'u-text-center1']">  
												{{item.grid}}
												
												</view>
												
											</scroll-view>
										</view>
						
						
					</u-dropdown-item>
				</u-dropdown>
			
			</li>
			</u-sticky > -->
			<li class="tableTh1" v-for="item in list" @click="goCollection(item.id_card)" >
				<view class="part1">{{item.labor_name || ''}}</view>
				<view class="part2">**{{item.id_card.substr(-8) || ''}}</view>
				<view class="part4">{{item.live_village || ''}}</view>
				<view class="part3">{{item.grid== null || item.grid==''?'':item.grid}}</view>
			</li>
			
		</ul>
		<view class="" style="padding-top:20px;">
			<u-empty text="没有搜索结果" mode="search" v-show="isShow" ></u-empty>
		</view>
		
		<!-- 加载更多 -->
		<u-loadmore
		  v-if="list.length != 0"
		  :status="status"
		  @loadmore="loadmore"
		></u-loadmore>
		
	</view>
</template>

<script>
	import api from "../../api/routes.js";
	export default{
		data(){
			return{
				title:'',
				type:'',
				id:'',
				status: "loadmore",
				page:1,
				limit:20,
				//判断是否发送请求的条件
				load: false,
				total:0,
				keyword:'',
				list:[],
				isShow:false,
				value1: 1,
				gridList:[],
				grid:""
				
			}
		},
	   async onLoad(e) {
			this.title=e.addressName;
			this.id=e.id;
			this.type=e.type;
			console.log(this.id,'this.id');
			console.log(this.type,'this.type');
			
			if(e.type=='allTotal'){
				uni.setNavigationBarTitle({
					title:'劳动力总数'
									
				})
			}else if(e.type=='notUpdate'){
				uni.setNavigationBarTitle({
					title:'未更新台账'
									
				})
			}else if(e.type=='aryUpdate'){
				uni.setNavigationBarTitle({
					title:'已更新台账'
									
				})
			}else if(e.type=='todayUpdate'){
				uni.setNavigationBarTitle({
					title:'今日更新台账'
									
				})
			}
			
			this.getList()
		},
		// onShow() {
		// 	this.getList()
		// },
		
		// 下拉刷新
		onReachBottom() {
			  console.log(this.status ,88888888)
		  //页面抵达底部后，如果此时的status状态是加载更多，那就调用loadmore方法
		  if (this.status === "loadmore") {
		    this.loadmore();
		  }
		},
		methods:{
			// 筛选网格
		async categrey(index){
				this.grid = index;
				this.page=1;
				this.list=[];
				this.getList()
				this.$refs.uDropdown.close();
				
				 
				
				
			},
			goCollection(idCard){
				uni.navigateTo({
				    url: "/pages/humanSociety/humanSociety?idCard="+idCard+"&isNew=1",
				});
			},
			
			search(value){
				console.log(value,"查询");
				if(value){	
					this.page=1;
					this.list=[];
					this.getList(value)
				}else{
					this.$u.toast('请输入姓名或身份证号')
				}
				
				// this.list=[];
				// this.getList(value)
				
			},
			// 获取数据
		    async getList(value){
				// 判断当前是否在请求，如果为true正在请求数据，就让他返回空，如果为false没在请求，就让它开始请求数据
				if (this.load) {
				  return;
				}
				
				
				
				
				
				this.load = true;
				// 请求数据时，状态改为加载中状态
				this.status = "loading";
				// 发送请求
				const res = await this.$myRequest({
				  url: api.getRegion,
				  method: "POST",
				  data: {
				    deptId:this.id, //部门ID
				    type:this.type, //类型根据上个界面传来的
				    page:this.page, //页码
				    limit:this.limit, //取多少条
				    key:value,//搜索关键词,
				    grid:this.grid
				  },
				});
				// 请求完以后，将load改为false，方便下一次发送请求
				this.load = false;
				console.log(res,'getliat');
				if(res.data.code == 0){
					
					if(res.data.gridList.length>0){
						this.gridList=res.data.gridList
					}
					console.log(this.gridList,'this.gridList');
					this.total = res.data.page.totalCount;
					this.list = [...this.list, ...res.data.page.list];
					if(this.list.length==0){
						this.isShow=true;
					}else{
						this.isShow=false;
					}
					this.ismore();
					
				}else {
					return uni.showToast({
					  title: res.msg,
					  icon: "none",
					});
					//并将状态码改为nomore，没有更多了
					this.status = "nomore";
				}
				
				
		 
				
			},
			loadmore(){
				console.log('loadmore');
				// 每次出发该方法，都要使页数加一
				this.page++;
				// 页数加一后，在调用getList方法，获取下一页的数据
				this.getList();
			},
			// 判断是否还有更多数据
			ismore() {
			
			  console.warn(this.total, "====", this.list.length);
			  // 判断当数据总数等于数据列表的长度时，此时已经获取到全部数据，没有更多了，将加载状态改为nomore
			  if (this.total === this.list.length) {
			    this.status = "nomore";
			    // 否则，将状态改为loadmore，仍然还有数据
			  } else {
			    this.status = "loadmore";
			  }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		height: 100%;
	}
	.title{
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}
	.title1{
		height: 50px;
		line-height: 50px;
		padding: 0 10px;
		background: #fff;
	}
	
	
	.Ul{
	   
	   .tableTh1{
	   		   height: 50px;
	   		   // border-bottom: 1px solid gray;
	   		   display: flex;
	   		   flex-wrap: wrap;
	   		   line-height: 50px;
	   		   text-align: center;
			   border-bottom: 1px solid #F5F6F8;
	   		   .part1{
	   			   width: 20%;
	   		   }
	   		   .part2{
	   		   		width: 20%;
	   		   }
			   .part3{
			   		width: 20%;
					// width:94px;/*要显示文字的宽度*/
					text-overflow :ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
					white-space :nowrap; /*让文字不换行*/
					overflow : hidden; 
			   }
			   .part4{
			   		width: 40%;
					text-overflow :ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
					white-space :nowrap; /*让文字不换行*/
					overflow : hidden; 
			   }

			   
	   }
	   
	   
	   
	}
	.tableTh{
			   height: 50px;
			   display: flex;
			   flex-wrap: wrap;
			   line-height: 50px;
			   align-items: center;
			   text-align: center;
			   font-size: 14px;
			   font-weight: bold;
			   border-bottom: 1px solid #F5F6F8;
			   background: #f4f4f4;
			   
			   .u-text-center1{
				   text-align: center;
				   height: 40px;
				   line-height: 40px;
				     border-bottom: 1px solid #f4f4f4;
				   color: gray;
			   }
			   .u-text-center2{
			   			   text-align: center;
			   			   height: 40px;
			   			   line-height: 40px;
			   			   border-bottom: 1px solid #f4f4f4;
			   			   color: #2979ff;
			   }
	}
	
	::v-deep .u-dropdowns .u-dropdown__menu__item:nth-child(1),::v-deep .u-dropdowns .u-dropdown__menu__item:nth-child(2),::v-deep .u-dropdowns .u-dropdown__menu__item:nth-child(3) {
			.u-dropdown__menu__item__arrow{
				display: none !important;
			}	
			.u-icon{
				display: none !important;
			}
			.u-dropdown__menu__item__text{
				color: #333333 !important;
			}
			
			.u-dropdown__content{
				display: none !important;
			}
			
			
	}
	
	
	
</style>